<template>
	<view class="create-order">
		<u-sticky>
			<u-tabs :list="tabList" :current="currTab" @click="handleTabChange" lineWidth="56" lineColor="#F65D30"
				:activeStyle="tabsStyle.activeStyle" :inactiveStyle="tabsStyle.inactiveStyle" class="create-order-tabs"
				:scrollable='false'>
			</u-tabs>
		</u-sticky>

		<view class="p-3 order-form-wrap">
			<view class="sub-title formTitleRef_0">客户信息</view>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="电话" prop="phone" borderBottom>
					<u--input v-model="orderForm.phone" border="none" placeholder="填写电话号码"></u--input>
				</u-form-item>
				<u-form-item label="联系人" prop="name" borderBottom>
					<u--input v-model="orderForm.name" border="none" placeholder="填写联系人姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择性别" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="区域" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择区域" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="详细地址" prop="name" borderBottom>
					<u--input v-model="orderForm.name" border="none" placeholder="填写地址"></u--input>
				</u-form-item>
				<u-form-item label="客户" prop="sex">
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择客户" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<view class="sub-title formTitleRef_1">工单信息</view>
			<view class="order-form-single">
				<view class="pl-3 pr-3 order-form-title">*下单记录</view>
				<u--textarea placeholder="填写下单记录" confirmType="done" v-model="orderForm.name"></u--textarea>
			</view>
			<view class="order-form-single">
				<view class="pl-3 pr-3 order-form-title">图片上传 (0/5)</view>
				<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
					:maxCount="5"></u-upload>
			</view>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="设备名称" prop="phone" borderBottom>
					<u--input v-model="orderForm.phone" border="none" placeholder="填写设备名称"></u--input>
				</u-form-item>
				<u-form-item label="型号规格" prop="name" borderBottom>
					<u--input v-model="orderForm.name" border="none" placeholder="填写型号规格"></u--input>
				</u-form-item>
				<u-form-item label="序列号" prop="phone" borderBottom>
					<u--input v-model="orderForm.phone" border="none" placeholder="填写序列号"></u--input>
				</u-form-item>
				<u-form-item label="类别" prop="name" borderBottom>
					<u--input v-model="orderForm.name" border="none" placeholder="填写设备类别"></u--input>
				</u-form-item>
				<u-form-item label="品牌" prop="name" borderBottom>
					<u--input v-model="orderForm.name" border="none" placeholder="填写设备品牌"></u--input>
				</u-form-item>
				<u-form-item label="购买日期" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择购买日期"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="有效期" prop="sex">
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择有效期"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<view class="sub-title formTitleRef_2">服务信息</view>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="服务类型" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择服务类型"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务分类" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择服务分类"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="订单来源" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择订单来源"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="来源单号" prop="phone" borderBottom>
					<u--input v-model="orderForm.phone" border="none" placeholder="填写来源单号"></u--input>
				</u-form-item>
				<u-form-item label="服务加急" prop="phone" borderBottom>
					<view class="flex justify-right">
						<u-switch v-model="orderForm.jj" @change="change" activeColor="#F65D30"></u-switch>
					</view>
				</u-form-item>
				<u-form-item label="预约时间" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择预约时间"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="收费金额" prop="phone">
					<u--input v-model="orderForm.phone" border="none" placeholder="填写收费金额"></u--input>
				</u-form-item>
			</u--form>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="推广员ID" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写推广员ID"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="业务员" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择业务员"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务员工1" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择服务员工"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item>
					<u-button class="service-staff" text="添加服务员工" color="#F65D30"></u-button>
				</u-form-item>
			</u--form>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="业务状态" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="选择业务状态"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务记录" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写服务记录"
						border="none">
					</u--input>
				</u-form-item>
			</u--form>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="是否返工" prop="sex" borderBottom>
					<view class="flex justify-right">
						<u-switch v-model="orderForm.jj" @change="change" activeColor="#F65D30"></u-switch>
					</view>
				</u-form-item>
				<u-form-item label="返工工单" prop="sex">
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写返工工单"
						border="none">
					</u--input>
				</u-form-item>
			</u--form>
			<view class="sub-title formTitleRef_3">费用明细</view>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="服务费" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写服务金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="销售商品费用" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写销售商品金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="合计" prop="sex">
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="合计金额" border="none">
					</u--input>
				</u-form-item>
			</u--form>
			<u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
				:rules="orderRules" ref="form1">
				<u-form-item label="服务提成" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写服务提成金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="业务提成" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写业务提成金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="商品成本" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写商品成本金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="已付金额" prop="sex" borderBottom>
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="填写已付金额"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="合计" prop="sex">
					<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="合计金额" border="none">
					</u--input>
				</u-form-item>
			</u--form>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formHeightList: [],
				tabsStyle: {
					activeStyle: {
						color: '#F65D30',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					},
					inactiveStyle: {
						color: '#333333',
						transform: 'scale(1)'
					}
				},
				currTab: 0,
				tabList: [{
					name: '客户信息'
				}, {
					name: '工单信息'
				}, {
					name: '服务信息'
				}, {
					name: '费用明细'
				}, ],
				orderForm: {
					jj: true
				},
				orderRules: {

				},
				fileList4: [],
			};
		},
		// onPageScroll(res) {
		// 	console.log('onPageScroll', res)

		// },
		mounted() {
			
			setTimeout(()=>{
				uni.pageScrollTo({
					scrollTop: 0, 
					duration: 0
				});
				this.tabList = this.tabList.map((item, idx) =>{
					uni.createSelectorQuery().select(".formTitleRef_" + idx).boundingClientRect((
						res) => {
						console.log('formTitleRef_0', res, res.top)
						item.top = res.top
						console.log('return', item)
						
					}).exec()
					return item
				})
				console.log('this.tabList',this.tabList)
				
			},0)
		},
		methods: {
			handleTabChange(item) {
				console.log('handleTabChange', item, this.formHeightList)
				const tabTop = this.tabList[item.index].top
				uni.pageScrollTo({
					scrollTop: tabTop - 44,
					duration: 200 
				});
			}
		}
	}
</script>

<style lang="scss">
	.create-order {
		.create-order-tabs {
			background-color: #fff;
		}

		.sub-title {
			color: $s-manager-color;
			font-size: 28rpx;
			margin-bottom: 24rpx;

		}

		.order-form-wrap {
			.order-form-single {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				margin-bottom: 30rpx;

				.order-form-title {
					color: #F43030;
					font-size: 30rpx;
					background-color: #FFF7F5;
					padding-top: 24rpx;
					padding-bottom: 24rpx;
				}

				::v-deep .u-textarea {
					border-color: transparent !important;
					padding: 20rpx 30rpx;
					border-radius: 0;
				}

				::v-deep .u-upload__wrap {
					padding: 30rpx;
					border-radius: 16rpx;

					.u-upload__button {
						background-color: #FFF7F5;

						.u-icon__icon {
							color: $s-manager-color !important;
							font-size: 80rpx !important;
							line-height: 80rpx !important;
						}
					}
				}
			}

			.order-form-block {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				margin-bottom: 30rpx;

				.service-staff {
					width: 108px;
					height: 28px;
					border-radius: 14px;
				}

				.justify-right {
					justify-content: right;
					width: 100%;
				}

				::v-deep .uni-input-wrapper {
					.uni-input-input {
						text-align: right;
					}

					.input-placeholder {
						text-align: right;
						color: #808080;
					}
				}

				::v-deep .u-form-item__body__left__content__label {
					color: #222;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
